<script setup name="cart-page">
import { onActivated, onDeactivated, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { computed } from 'vue';
import { useStore } from 'vuex';
import * as cartApi from '@/api/cart';

const store = useStore();
const multipleTableRef = ref();
const multipleSelection = ref([]);


const toggleSelection = (rows) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value.clearSelection();
  }
};
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};
function handleChange() {

}
// 主页购物车列表
const cartList = computed(() => store.state.cart.cartList);
// 购物车规格
function onSelected(id) {
  console.log(id);
  store.dispatch('cart/updateGoodsSku', id);
}
const goodsSku = computed(() => store.state.cart.goodsSku);

// 删除购物车
function onDeletegoods(id) {
  ElMessageBox.confirm(
    '亲，您是否确认删除商品?',
    // 'Warning',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'info',
    },
  )
    .then(async () => {
      await cartApi.DeleteCart(id);
      ElMessage({
        type: 'success',
        message: '删除成功',
      });
      store.dispatch('cart/updateCartList');
    });
}
</script>

<template>
  <div class="cart-container">
    <div class="main-warp">
      <div class="checkbox">

        <el-table
          ref="multipleTableRef"
          :data="cartList.result"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column prop="商品信息" label="商品信息" header-align="center" width="400">
            <template #default="scope">
              <div class="goods-info-warp">
                <div class="goods-img-warp">
                  <img :src="scope.row.picture">
                </div>
                <div class="goods-name-warp">
                  <div class="goods-name">{{ scope.row.name }}</div>
                  <el-dropdown trigger="click">
                    <span class="el-dropdown-link" @click="onSelected(scope.row.skuId)">
                      <span>
                        {{ scope.row.attrsText }}
                      </span>
                      <el-icon class="el-icon--right">
                        <arrow-down />
                      </el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu class="el-dropdown-menu">
                        <div class="dect" v-for="item in goodsSku.specs" :key="item.name">
                          <div class="dect-name">{{ item.name }}</div>
                          <div class="dect-item">
                            <div v-for="str in item.values" :key="str.name">
                              <div class="dect-img" v-if="str.picture">
                                <img :src="str.picture" alt="">
                              </div>
                              <div v-else class="dect-item-name">
                                {{ str.name }}
                              </div>
                            </div>
                          </div>
                        </div>
                        <button class="dect-btn">确认</button>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="单价" label="单价" header-align="center" align="center">
            <template #default="scope">¥{{ scope.row.price }}</template>
          </el-table-column >
          <el-table-column prop="数量" label="数量" header-align="center" align="center">
            <template #default="scope">
              <el-input-number v-model="scope.row.count" :min="1" :max="10" @change="handleChange" />
            </template>
          </el-table-column >
          <el-table-column prop="小计" label="小计" header-align="center" align="center">
            <template #default="scope" >
              <div class="subtotal">
                ¥{{ (scope.row.count * scope.row.price).toFixed(1) }}
              </div>
            </template>
          </el-table-column >
          <el-table-column prop="操作" label="操作" header-align="center" align="center">
            <template #default="scope">
              <div>移入收藏夹</div>
              <div
                class="delete"
                @click="onDeletegoods(scope.row.skuId)"
              >
                删除
              </div>
              <div>找相似</div>
            </template>
          </el-table-column >
        </el-table>
      </div>
    </div>
  </div>
</template>

<style scope lang="scss">
@import url('../../../assets/style/common.scss');
.warp {
  width: 1240px;
  margin: 0 auto;
}

.hide {
  width: 100%;
  /* 有限的空间才能有溢出的可能 */
  overflow: hidden;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  word-break: break-all;
  line-break: anywhere;

}

.cart-container {
  width: 100%;
  background-color: #f5f5f5;

  .main-warp {
    @extend .warp;
    min-width: 1240px;
    background-color: #fff;

    .goods-info-warp {
      display: flex;
      // justify-content: space-between;

      .goods-img-warp {
        width: 100px;
        height: 100px;
        margin-right: 16px;

        img {
          // width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .goods-name-warp {
        display: flex;
        flex-direction: column;
        justify-content: center;


        .goods-name{
          @extend .hide;
        }

        .el-dropdown-link {
          margin-top: 8px;
          outline: 1px solid #f5f6f5;
          padding: 4px;
          display: flex;
          span {
            @include hide(1);
          }
        }


      }


    }

    .subtotal {
      color: #bf4d49;
    }

    .delete {
      color: #5bb79c;
    }

  }
}

.el-dropdown-menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 400px;
  // height: 159px;
  padding: 20px;


  .dect {
    display: flex;
    // flex-wrap: wrap;
    align-items: center;
    // color: #999999;
    margin-bottom: 16px;

    .dect-name {
      color: #999999;
      padding-right: 8px;
    }
    .dect-item {
      display: flex;
      margin-left: 16px;
      flex-wrap: wrap;

      .dect-item-name {
        padding: 4px 20px;
        border: 1px solid #ccc;
        margin-right: 8px;
        color: #666666;
        margin-bottom: 8px;
      }
      .dect-img {
        width: 50px;
        height: 50px;
        border: 1px solid #ccc;
        margin-right: 8px;


        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }


  }

  .dect-btn {
    width: 60px;
    height: 32px;
    margin-left: 40px;
    border: none;
    background-color: #5bb79c;
    color: #fff;
    border-radius: 4px;
  }
}
</style>
